<template>
  <div>
    <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>课程考试查询管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索筛选 -->
      <el-form :inline="true" :model="formInline" class="user-search">
        <el-form-item label="搜索：">
          <el-input size="small" v-model="formInline.title" placeholder="输入课程考试编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button size="small" type="primary" icon="el-icon-plus" @click="add()" v-if="loginUser.role=2">添加</el-button>
          <el-button size="small" type="danger" icon="el-icon-delete" @click="delAll" style="margin-left:15px;" >一键删除</el-button>
        </el-form-item>
      </el-form>
      <!--列表-->
      <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
                element-loading-text="拼命加载中" @selection-change="handleSelectionChange"  style="width: 100%;">
        <el-table-column align="center" type="selection" width="60"></el-table-column>
        <el-table-column label="编号" width="60">
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column prop="title1" label="选择题" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="optionA" label="选项A" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="optionB" label="选项B" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="optionC" label="选项C" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="optionD" label="选项D" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="result1" label="选择答案"></el-table-column>
        <el-table-column prop="cid" label="课程编号"></el-table-column>
        <el-table-column prop="cname" label="课程名称"></el-table-column>
        <el-table-column prop="title2" label="判断题" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="result2" label="判断答案" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="title31" label="填空题" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="result3" label="填空答案" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column align="center" label="操作" v-if="loginUser.role=2">
          <template slot-scope="scope">
            <el-button size="mini" @click="update(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 修改界面 -->
      <el-dialog :title="updateTitle" :visible.sync="updateFormVisible" width="70%" @click="closeDialog">
        <el-form label-width="120px" :model="updateForm" :rules="rules" ref="updateForm">

          <el-form-item label="课程考试编号" prop="deptName" v-show="false">
            <el-input size="small" v-model="updateForm.id" auto-complete="off" placeholder="请输入编号"></el-input>
          </el-form-item>

          <el-form-item label="1.选择题" prop="title">
            <el-input type="textarea" size="small" v-model="updateForm.title1" auto-complete="off" placeholder="请输入名称"></el-input>
          </el-form-item>

          <el-row>
            <el-col :span="6">
              <el-form-item label="选项A" prop="optionA">
                <el-input type="small" v-model="updateForm.optionA" size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="选项B" prop="optionB">
                <el-input type="small" v-model="updateForm.optionB" size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="选项C" prop="optionC">
                <el-input type="small" v-model="updateForm.optionC" size="mini" rows="8"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="选项D" prop="optionD">
                <el-input type="small" v-model="updateForm.optionD" size="mini" rows="8"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6" :offset="12">
              <el-form-item label="正确选择" prop="cid">
                <el-select v-model="updateForm.result1" placeholder="请选择">
                  <el-option key="A" value="A" label="A"></el-option>
                  <el-option key="B" value="B" label="B"></el-option>
                  <el-option key="C" value="C" labels="C"></el-option>
                  <el-option key="D" value="D" label="D"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属课程" prop="cid">
                <el-select v-model="updateForm.cid" placeholder="请选择">
                  <el-option v-for="item in productMana" :key="item.cid" :value="item.cid" :label="item.cname"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>


          <el-form-item label="2.判断题" prop="title">
            <el-input type="textarea" size="small" v-model="updateForm.title2" auto-complete="off" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="12" :offset="12">
              <el-form-item label="正确判断" prop="radio">
                <template>
                  <el-radio-group v-model="updateForm.result2" size="medium">
                    <el-radio border label="正确"></el-radio>
                    <el-radio border label="错误"></el-radio>
                  </el-radio-group>
                </template>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="3.填空题" prop="optionA">
                <el-input type="small" v-model="updateForm.title31" size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="后置" prop="optionB">
                <el-input type="small" v-model="updateForm.title32" size="mini"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6" :offset="12">
              <el-form-item label="正确填空" prop="cid">
                <el-input type="small" v-model="updateForm.result3" size="mini"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button size="small" type="primary" :loading="loading" class="title"
                     @click="updateSave()">保存
          </el-button>
        </div>
      </el-dialog>


      <!-- 新增模态框界面 -->
      <el-dialog :title="addTitle" :visible.sync="addFormVisible" width="60%" @click="closeDialog">
        <el-form ref="addForm" :model="addForm" label-width="80px" :rules="rules">

          <el-form-item label="1.选择题" prop="title">
            <el-input type="textarea" size="small" v-model="addForm.title1" auto-complete="off" placeholder="请输入名称"></el-input>
          </el-form-item>

          <el-row>
            <el-col :span="6">
              <el-form-item label="选项A" prop="optionA">
                <el-input type="small" v-model="addForm.optionA" size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="选项B" prop="optionB">
                <el-input type="small" v-model="addForm.optionB" size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="选项C" prop="optionC">
                <el-input type="small" v-model="addForm.optionC" size="mini" rows="8"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="选项D" prop="optionD">
                <el-input type="small" v-model="addForm.optionD" size="mini" rows="8"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6" :offset="12">
              <el-form-item label="正确选择" prop="cid">
                <el-select v-model="addForm.result1" placeholder="请选择">
                  <el-option key="A" value="A" label="A"></el-option>
                  <el-option key="B" value="B" label="B"></el-option>
                  <el-option key="C" value="C" labels="C"></el-option>
                  <el-option key="D" value="D" label="D"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>


          <el-form-item label="2.判断题" prop="title">
            <el-input type="textarea" size="small" v-model="addForm.title2" auto-complete="off" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="12" :offset="12">
              <el-form-item label="正确判断" prop="radio">
                <template>
                  <el-radio-group v-model="addForm.result2" size="medium">
                    <el-radio border label="正确"></el-radio>
                    <el-radio border label="错误"></el-radio>
                  </el-radio-group>
                </template>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="3.填空题" prop="optionA">
                <el-input type="small" v-model="addForm.title31" size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="后置" prop="optionB">
                <el-input type="small" v-model="addForm.title32" size="mini"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6" :offset="12">
              <el-form-item label="正确填空" prop="cid">
                <el-input type="small" v-model="addForm.result3" size="mini"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-col :span="6" :offset="18">
            <el-form-item label="所属课程" prop="cid">
              <el-select v-model="addForm.cid" placeholder="请选择">
                <el-option v-for="item in productMana" :key="item.cid" :value="item.cid" :label="item.cname"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button size="small" type="primary" :loading="loading" class="title"
                     @click="addSave()">保存
          </el-button>
        </div>

      </el-dialog>
    </div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                nshow: true, //switch开启
                fshow: false, //switch关闭
                loading: false, //是显示加载
                addFormVisible: false, //控制编辑页面显示与隐藏
                updateFormVisible: false, //控制编辑页面显示与隐藏

                loginUser:JSON.parse(localStorage.getItem('loginUser')),

                addTitle: '添加课后题',
                addForm: {
                  id: '',
                  lid: JSON.parse(localStorage.getItem('loginUser')).lid,
                  ctName: '',
                  ctDesc: ''
                },

                updateTitle: '修改课后题',
                updateForm: {
                  id: '',
                  title1: '',
                  optionA: '',
                  optionB: '',
                  optionC: '',
                  optionD: '',
                  result1: '',
                  cid: '',
                  cname: '',
                  title2: '',
                  result2: '',
                  title31: '',
                  title32: '',
                  result3: ''
                },

                // rules表单验证
                rules: {
                    id: [{required: true, message: '请输入课程考试名称', trigger: 'blur'}],
                    newsname: [{required: true, message: '请输入登录名称', trigger: 'blur'}],
                    password: [{required: true, message: '请输入登录密码', trigger: 'blur'}],
                    realname: [{required: true, message: '请输入真实姓名', trigger: 'blur'}],
                    gender: [{required: true, message: '请输入性别', trigger: 'blur'}],
                    email: [{required: true, message: '请输入电子邮箱', trigger: 'blur'}],
                    mobile: [{required: true, message: '请输入联系方式', trigger: 'blur'}],
                    role: [{required: true, message: '请输入权限', trigger: 'blur'}],
                    sczt: [{required: true, message: '请输入审核状态', trigger: 'blur'}]
                },
                formInline: {
                    title: ''
                },
                // 删除部门
                seletedata: {
                    ids: '',
                    token: localStorage.getItem('newstoken')
                },
                userparm: [], //搜索权限
                listData: [], //课程考试数据
                productMana: [], //项目数据
                productManaAdd: [], //新增项目数据，未使用的课程所属的考试内容
                // 分页参数
                pageparm: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 10
                }
            }
        },
        /**
         * 创建完毕
         */
        created() {
            this.getdata(this.formInline)
        },

        /**
         * 里面的方法只有被调用才会执行
         */
        methods: {
            // 获取公司列表
            getdata() {
                // 表格加载开始
                // this.loading = true
                const _this = this;

                this.loginUser = JSON.parse(localStorage.getItem("loginUser"));

                axios.get(localStorage.getItem("globalUrl") + "examine/findAll").then(function(resp){
                    _this.listData = resp.data.data;

                    // 表格加载结束
                    _this.loading = false
                });

                axios.get(localStorage.getItem("globalUrl") + "course/findAll").then(function(resp){
                  _this.productMana  = resp.data.data;

                  // 表格加载结束
                  _this.loading = false
                });

                axios.get(localStorage.getItem("globalUrl") + "examine/findAllByIsNotExistExamine").then(function(resp){
                  _this.productManaAdd  = resp.data.data;

                  // 表格加载结束
                  _this.loading = false
                });


            },
            formatDate(value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? "0" + MM : MM;
                let d = date.getDate();
                d = d < 10 ? "0" + d : d;
                let h = date.getHours();
                h = h < 10 ? "0" + h : h;
                let m = date.getMinutes();
                m = m < 10 ? "0" + m : m;
                let s = date.getSeconds();
                s = s < 10 ? "0" + s : s;
                return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
            },

            filterTag(value, row) {
                return row.tag === value;
            },

            // 搜索事件
            search() {
                const _this = this;
                axios.get(localStorage.getItem("globalUrl") + "examine/search?title="+this.formInline.title).then(function(resp){

                    _this.listData = resp.data.data;

                    // 表格加载结束
                    _this.loading = false
                });

            },
            //信息修改监听
            update: function (index, row) {
                this.updateForm = row;
                this.updateFormVisible = true;
            },
            //信息修改
            updateSave(){
                const _this = this;
                axios.put(localStorage.getItem("globalUrl") + "examine/update",this.updateForm).then(function(){

                    axios.get(localStorage.getItem("globalUrl") + "examine/findAll").then(function(resp){
                        _this.listData = resp.data.data;

                        // 表格加载结束
                        _this.loading = false
                    });
                    _this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                });

                this.updateFormVisible = false; //控制编辑页面显示与隐藏
            },
            //信息增加监听
            add: function () {
                this.addFormVisible = true;
            },
            //信息新增
            addSave(){
                // this.addForm =
                const _this = this;
                axios.post(localStorage.getItem("globalUrl") + "examine/save",this.addForm).then(function(){

                    axios.get(localStorage.getItem("globalUrl") + "examine/findAll").then(function(resp){
                        _this.listData = resp.data.data;

                        _this.$message({
                            type: 'success',
                            message: resp.data.message
                        });

                        // 表格加载结束
                        _this.loading = false
                    });
                    _this.addFormVisible = false; //控制编辑页面显示与隐藏

                });



            },

            // 删除公司
            deleteUser(index, row) {
                this.$confirm('确定要删除吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    const _this = this;

                    axios.delete(localStorage.getItem("globalUrl") + 'examine/deleteById?id='+row.id).then(function(){
                        axios.get(localStorage.getItem("globalUrl") + "examine/findAll").then(function(resp){
                            _this.listData = resp.data.data;

                            _this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });

                            // 表格加载结束
                            _this.loading = false
                        });
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })

                })
            },
            // 关闭编辑、增加弹出框
            closeDialog() {
                this.addFormVisible = false
            },
          handleSelectionChange(val) {
            console.log(val)  //打印选中的行集合
            this.multipleSelection = val;
          },
          //点击批量删除
          delAll(){
            const _this = this;
            var arr=[]
            //遍历点击选择的对象集合，拿到每一个对象的id添加到新的集合中
            this.multipleSelection.forEach(row=>arr.push(row.id))
            this.$confirm('确定删除吗', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'success',
              callback: action => {
                if (action === 'confirm') {
                  axios.delete(localStorage.getItem("globalUrl") + 'examine/deleteByIds?ids='+arr).then(function(result){
                    if(result.data.data){
                      //批量删除
                      _this.$notify({
                        title: '批量删除成功',
                        message: '',
                        type: 'success',
                        duration: 2000
                      })
                    }else{
                      _this.$notify({
                        title: '批量删除失败',
                        message: '',
                        type: 'info',
                        duration: 2000
                      })
                    }
                    axios.get(localStorage.getItem("globalUrl") + "examine/findAll").then(function(resp){
                      _this.listData = resp.data.data;
                      // 表格加载结束
                      _this.loading = false
                    });
                  })
                }
              }
            })
          }
        }
    }
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }
</style>
